<template>
  <el-tabs
    v-model="activeTab"
    class="demo-tabs"
    @tab-click="handleClick"
    v-if="exptForm.campList.length"
  >
    <el-tab-pane
      :label="item.name"
      :name="item.id"
      v-for="item in exptForm.campList"
    >
    </el-tab-pane>
  </el-tabs>

  <div class="entity-container" v-if="exptForm.campList.length">
    <div class="title">
      {{ getName(exptForm.campList, activeTab) }}
      <span>总席位数量：{{ getNum(exptForm.campList, currentIndex) }}</span>
    </div>
    <!-- 选择指挥所  -->
    <div class="seat-list">
      <div
        v-for="(item, index) in exptForm.campList[currentIndex].seatList"
        class="seat-item"
      >
        <span>角色席位：</span>
        <el-select
          allow-create
          clearable
          filterable
          v-model="item.seatRole"
          placeholder="请选择角色席位"
          @change="changeSeatRole(index, $event)"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="item in seatList"
            :key="item.id"
          />
        </el-select>
        <span>数量：</span>
        <el-input-number
          v-model="item.seatNum"
          style="width: 100%"
        ></el-input-number>
        <i class="iconfont icon-shanchu" @click="delSeatRole(index)"></i>
      </div>
      <div class="add-seat" @click="addSeatRole">
        <span class="icon">+</span>
        <span class="name">添加席位</span>
      </div>
    </div>
  </div>
  <div v-else class="tip">请先回到第二步，进行阵营设置</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
function getName(arr, id) {
  let item = arr.filter((v) => v.id == id);
  if (item && item.length) {
    return item[0].name;
  }
}
const props = defineProps({
  exptForm: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
let emit = defineEmits([""]);
// 席位列表
const seatList = ref([
  {
    name: "首长席",
    id: 0,
  },
  {
    name: "综合筹划席",
    id: 1,
  },
  {
    name: "辅助筹划席",
    id: 2,
  },
  {
    name: "情报席",
    id: 3,
  },
  {
    name: "综合规划席",
    id: 4,
  },
  {
    name: "辅助规划席",
    id: 5,
  },
  {
    name: "综合战斗管理席",
    id: 6,
  },
  {
    name: "单兵战斗管理席",
    id: 7,
  },
  {
    name: "场景编辑席",
    id: 8,
  },
  {
    name: "导调席",
    id: 9,
  },
  {
    name: "综合评估席",
    id: 10,
  },
]);
// 阵营
const activeTab = ref("");
const currentIndex = ref("");
function findindex(arr, id) {
  let index = arr.findIndex((v) => v.id == id);

  if (index != -1) {
    return index;
  }
}

watch(
  () => props.exptForm.campList,
  (val, preVal) => {
    //val为修改后的值,preVal为修改前的值
    if (val && val.length) {
      if (activeTab.value == "") {
        activeTab.value = val[0].id;
        currentIndex.value = findindex(val, activeTab.value);
      }
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);
function getNum(arr, index) {
  let num = 0;
  arr[index].seatList.forEach((v) => {
    num += v.seatNum;
  });
  return num;
}
const handleClick = (tab, event) => {
  activeTab.value = tab.props.name;
  currentIndex.value = findindex(props.exptForm.campList, activeTab.value);
};
const delSeatRole = (index) => {
  props.exptForm.campList[currentIndex.value].seatList.splice(index, 1);
};
var compare = [];
const addSeatRole = () => {
  props.exptForm.campList[currentIndex.value].seatList.push({
    seatRole: "",
    seatNum: 0,
  });
  compare = JSON.parse(
    JSON.stringify(props.exptForm.campList[currentIndex.value].seatList)
  );
};

function deepCopyArray(arr) {
  var copiedArray = [];
  for (var i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      copiedArray.push(deepCopyArray(arr[i]));
    } else {
      copiedArray.push(arr[i]);
    }
  }
  return copiedArray;
}

// 选择席位
const changeSeatRole = (indexs, e) => {
  console.log(indexs);
  console.log(e);
  console.log(props.exptForm.campList[currentIndex.value].seatList);

  let index = compare.findIndex((v) => v.seatRole === e);
  //   console.log(index);
  if (index != -1) {
    console.log("找到");
    ElMessage({
      showClose: true,
      message: "已有选择的席位，请重新选择",
      type: "error",
    });
    props.exptForm.campList[currentIndex.value].seatList[indexs].seatRole = "";
    return;
  } else {
    compare = JSON.parse(
      JSON.stringify(props.exptForm.campList[currentIndex.value].seatList)
    );
  }
};

onMounted(() => {});
</script>
<style scoped lang="scss">
.entity-container {
  margin: 0 auto;
  width: 100%;
  height: calc(100% - 60px);

  overflow: hidden;
  overflow-y: auto;
  .title {
    height: 30px;
    background: #fe5b5b;
    font-size: 14px;
    line-height: 30px;
    padding: 0 20px;
    span {
      margin-left: 40px;
    }
  }
  .seat-list {
    padding: 10px 0;
    width: 100%;
    height: calc(100% - 32px);
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    .seat-item {
      padding: 10px;
      width: 180px;
      height: 180px;

      border: 2px solid #fff;
      display: flex;
      flex-direction: column;
      position: relative;
      //   justify-content: center;
      //   align-items: center;
      margin-right: 20px;
      margin-top: 10px;
      span {
        margin: 10px 0;
      }
      .icon-shanchu {
        position: absolute;
        bottom: 10px;
        right: 10px;
        &:hover {
          color: red;
        }
      }
    }
    .add-seat {
      width: 180px;
      height: 180px;
      border: 2px solid #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      .icon {
        font-size: 60px;
      }
      .name {
        font-size: 14px;
      }
    }
  }
}
.tip {
  text-align: center;

  line-height: 500px;
  width: 100% !important;
  margin: 0;
}
:deep() {
  .el-form-item__label {
    color: #fff;
  }
  // tabs
  .el-tabs {
    width: 100%;
    height: 50px;
    overflow: hidden;
  }
  .el-tabs__item {
    color: #fff;
  }
  .is-active {
    color: red;
  }
}
</style>
